<script setup>
    import { reactive, inject } from 'vue'
    import { useGetByIdApi, useAddApi, useUpdateApi } from './${t.varName}-api'

    //提供给父组件：打开弹框
    defineExpose({
        open
    })

    //接收父组件方法：父视图刷新
    const getList = inject('getList')

    // 双向绑定
    const data = reactive({
        // 是否显示弹框
        isShow: false,
        // 表单
        form: {}
    })

    // 创建一个空的model
    function createFormParam() {
        return {
            <#list t.getTallList() as c>
                ${c.fieldName}:'',
            </#list>
    }
    }

    // 打开弹框
    function open(id) {
        data.isShow = true
        if (id == 0) {
            // 新增
            data.form = createFormParam()
        } else {
            //修改
            useGetByIdApi({ 'id': id }).then(res => {
                data.form = res.data
            })
        }
    }

    //提交
    function ok() {

        if (data.form.id == '' || data.form.id == 0) {
            useAddApi(data.form).then(res => {
                ElMessage({
                    message: res.msg || 'Error',
                    type: 'success',
                    duration: 1 * 1000
                })
                getList() //父视图刷新
                data.isShow = false
            })
        } else {
            useUpdateApi(data.form).then(res => {
                ElMessage({
                    message: res.msg || 'Error',
                    type: 'success',
                    duration: 1 * 1000
                })
                getList() //父视图刷新
                data.isShow = false
            })
        }

    }

</script>

<template>
    <el-dialog v-model="data.isShow">
        <div class="vue-box">
            <div class="c-panel">
                <div class="c-title">数据新增</div>
                <el-form :model="data.form" label-width="120px">

                    <#list t.getTallList() as c>
                    <el-form-item label="${c.columnComment3}">
                        <el-input v-model="data.form.${c.fieldName}" placeholder="请输入"/>
                    </el-form-item>
                    </#list>
                    <el-form-item>
                        <el-button type="primary" @click="ok">确定</el-button>
                        <el-button @click="data.isShow = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </el-dialog>

</template>

<style lang='css' scoped>
</style>